<template>
  <div id="preFractionScoreline" class="main" v-loading="lineLoading">
    <div v-if="isVIP != 0">
      <div class="select-box">
        <el-select
          no-data-text="暂无数据"
          v-model="selecttextDX6"
          placeholder=" "
          @change="yearChange"
          style="width: 90px"
        >
          <el-option
            v-for="item in popArrDX6"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="scoreline-content">
        <div style="height: 36px; position: sticky; top: 110px; left: 0">
          <div
            class="pre-tr pre-head-tr text-center fw600 f14"
            style="top: 123px; border-top: 1px solid rgb(235, 238, 245)"
          >
            <div class="pre-td pre-td-code">代码</div>
            <div class="pre-td pre-td-name pl20">院校/专业名称</div>
            <div class="pre-td pre-td-choose" style="">计划</div>
            <div class="pre-td pre-td-plan">选科</div>
            <div class="pre-td pre-td-cose">最高分</div>
            <div class="pre-td pre-td-year">最低分</div>
            <div class="pre-td pre-td-year">最高位次</div>
            <div class="pre-td pre-td-year">最低位次</div>
          </div>
        </div>
        <div
          class="table0"
          style="width: 1200px"
          v-for="(item, index) in planList"
          :key="index"
        >
          <div class="pre-tr">
            <div class="pre-td pre-td-title flex-center f18 fw600">
              {{ item.title }}
            </div>
          </div>
          <div
            class="pre-tr fw600 text-333"
            style="background: rgb(250, 250, 250)"
          >
            <div class="pre-td pre-td-code text-center flex-center">
              <span class="cntext">{{ item.collegeEnrollCode || '-' }}</span>
            </div>
            <div class="pre-td pre-td-name pl20 flex-column" style="width: 62%">
              <p>
                <span class="cntext text-2121">{{
                  `${item.collegeName}` || '-'
                }}</span>
                <span
                  v-if="item.remark"
                  style="color: #86909c; font-size: 12px; margin-left: 5px"
                  >( 注：{{ item.remark }} )</span
                >
              </p>
            </div>
            <div class="pre-td pre-td-choose text-center flex-center">
              <span class="cntext">{{ item.enterNum || '-' }}</span>
            </div>
            <div class="pre-td pre-td-plan text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.chooseSubjectText || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-cose text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.maxScore || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-year text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.minScore || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-year text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.maxRank || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-year text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.minRank || '-'
              }}</span>
            </div>
          </div>
          <div
            class="pre-tr fw600 text-333"
            style="background: rgb(250, 250, 250)"
            v-for="(item2, i) in item.majors"
            :key="i"
            v-if="item.majors.length"
          >
            <div class="pre-td pre-td-code text-center flex-center deafultcss">
              {{ item2.professionEnrollCode }}
            </div>
            <div
              class="pre-td pre-td-name pl20 flex-column deafultcss"
              style="width: 62%"
            >
              {{ item2.majorName }}
            </div>
            <div class="pre-td pre-td-year text-center flex-center deafultcss">
              {{ item2.enterNum || '-' }}
            </div>
            <div class="pre-td pre-td-year text-center flex-center deafultcss">
              {{ item2.chooseSubjectText || '-' }}
            </div>
            <div class="pre-td pre-td-year text-center flex-center deafultcss">
              {{ item2.maxScore || '-' }}
            </div>
            <div class="pre-td pre-td-year text-center flex-center deafultcss">
              {{ item2.minScore || '-' }}
            </div>
            <div class="pre-td pre-td-year text-center flex-center deafultcss">
              {{ item2.maxRank || '-' }}
            </div>
            <div class="pre-td pre-td-year text-center flex-center deafultcss">
              {{ item2.minRank || '-' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <noIsVIP v-else></noIsVIP>
  </div>
</template>

<script setup>
import noIsVIP from '@/components/noIsVip/noIsVip';
import {
  getPreBatchSearch,
  getSchoolPlanFilter,
} from '/src/api/scoreline/scoreline';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed, ref } from 'vue';
const route = useRoute();
const store = useStore();
const planList = ref([]);
const popArrDX6 = ref([]);
const selecttextDX6 = ref('');
const lineLoading = ref(false);
const isVIP = computed(() => {
  return store.getters.user.userInfo.isVIP;
});

const yearChange = (val) => {
  selecttextDX6.value = val;
  fetchPreBatchSearch();
};
const fetchPreBatchSearch = () => {
  let reqData = {
    year: selecttextDX6.value,
    collegeCode: route.query.collegecode || '',
    provinceCode: store.getters.user.userInfo.pid || '',
  };
  lineLoading.value = true;
  getPreBatchSearch(reqData)
    .then((res) => {
      if (res.data.code == 20000) {
        planList.value = res.data.data;
        lineLoading.value = false;
      } else {
        lineLoading.value = false;
      }
    })
    .catch(() => {
      lineLoading.value = false;
    });
};
const allYearData = ref([]);
const fetchSchoolPlanFilter = () => {
  getSchoolPlanFilter({ pid: store.getters.user.userInfo.pid }).then((res) => {
    if (res.data.code == 20000) {
      popArrDX6.value = [];
      allYearData.value = res.data.data.years;
      res.data.data.years.forEach((item) => {
        popArrDX6.value.push(item.year);
      });
      selecttextDX6.value = popArrDX6.value[0] || '';
      fetchPreBatchSearch();
    }
  });
};
if (isVIP.value != 0) {
  fetchSchoolPlanFilter();
}
</script>

<style lang="scss" scoped>
#preFractionScoreline {
  margin-bottom: 150px;
}
.select-box {
  padding: 20px 0px;
  background: rgb(255, 255, 255);
  position: sticky;
  top: 40px;
  left: 0;
}

.text-center {
  text-align: center !important;
}

.pre-head-tr {
  background: #fff;
  color: #333 !important;
}

.pre-tr {
  font-size: 14px;
  display: flex;
  border-right: 1px solid #ebeef5;
}

.pre-head-tr .pre-td:first-child {
  border-left: 1px solid #e8e8e8;
}

.pre-head-tr .pre-td {
  border-left: none;
  color: #86909c;
  padding: 9px 0;
  min-height: 35px;
  font-size: 12px;
}

.pre-td-code {
  width: 10%;
}

.pre-td {
  border-bottom: 1px solid #e8e8e8;
}

.pre-td-name {
  width: 60%;
}

.pre-td-choose,
.pre-td-cose,
.pre-td-plan,
.pre-td-year {
  width: 10%;
}

.pre-td-title.pre-td {
  padding: 10px 0;
  color: #4e5969;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pre-td-title {
  width: 100%;
  padding: 11px 5px;
}

.pre-td {
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 13px 5px;
  min-height: 48px;
}
.deafultcss {
  color: #1d2129;
  font-size: 12px;
  font-weight: 400;
}
</style>
